<template>
  <div class="shop-recommend">
    <!--start-->
    <div class="new-product-show"  v-if="sellWell && sellWell.length > 0">
      <div class="new-product-show-right">
        <!--大图产品-->
        <largeImg v-bind:getImgData="sellWell" v-bind:dataIndex="3"></largeImg>
        <!--大图产品-->
        <div class="new-product-for-two ">
          <!--小图产品-->
          <smallImg  v-bind:getImgData="sellWell" v-bind:dataIndex="6" v-bind:paddingFlg="true"></smallImg>
          <smallImg v-bind:getImgData="sellWell" v-bind:dataIndex="7" ></smallImg>
          <!--小图产品-->
        </div>
      </div>
      <div class="new-product-show-left">
        <div class="new-product-for-two">
          <smallImg v-bind:getImgData="sellWell" v-bind:dataIndex="0"  v-bind:paddingFlg="true"></smallImg>
          <smallImg v-bind:getImgData="sellWell" v-bind:dataIndex="1" ></smallImg>
        </div>
        <!--大图产品-->
        <largeImg v-bind:getImgData="sellWell" v-bind:dataIndex="4"></largeImg>
        <!--大图产品-->
      </div>
      <div class="new-product-show-mid">
        <!--小图产品-->
        <smallImg v-bind:getImgData="sellWell" v-bind:dataIndex="2" ></smallImg>
        <!--小图产品-->

        <div class="new-product-show-mid-txt">
          <span>HOT</span>
          <a href="javascript:void(0)"  @click="routeToPath('/product/list?factoryId='+ getFactoryId, 'new')">查看更多</a>
          <!-- :to="{name:'index'}"-->
        </div>
        <!--小图产品-->
        <smallImg v-bind:getImgData="sellWell" v-bind:dataIndex="5" ></smallImg>
        <!--小图产品-->
      </div>
    </div>
    <!--end-->
    <div class="recommend-title">
      <img src="../../../assets/images/factory/templates/vip1/noble-temp_07.png" alt="">
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';

  //大图产品组件
  Vue.component('largeImg',{
    props:['getImgData','dataIndex'],
    data(){
      return{
        hoverFlg:false,
       // imgUrl:require('~/assets/images/factory/templates/vip1/noble-temp_03.png')
      }
    },
    template:`<div class="image-wrap">
        <div v-for="(item,index) in getImgData" v-if="index == dataIndex" v-on:mouseover="enterItem()"  v-on:mouseout="leaveItem" v-bind:class="{'active':hoverFlg}" @click="routeToPath('/product/'+item.productId, 'new')" class="new-product-show-tag margin relative">
          <a href="#"><img v-bind:src="URL.PIC+item.mainImgPath" alt=""></a>
          <div class="new-product-show-tag-wrap">
            <span>产品名称</span>
            <div class="new-product-show-tag-info">
            {{item.title}}
            </div>
          </div>
        </div></div>`,
    methods:{
      enterItem(){
        this.hoverFlg = true;
      },
      leaveItem(){
        this.hoverFlg = false;
      },
    }
  });

  //小图产品组件
  Vue.component('smallImg',{
    props:['paddingFlg','getImgData','dataIndex'],
    data(){
      return{
        hoverFlg:false,
        //paddingFlg:false,
        //imgUrl:require('~/assets/images/factory/templates/vip1/noble-template_16.jpg')
      }
    },
    template:`<div class="image-wrap"><div v-for="(item,index) in getImgData" v-if="index == dataIndex" v-on:mouseover="enterItem()"  v-on:mouseout="leaveItem" v-bind:class="{'active':hoverFlg,'first':paddingFlg}" @click="routeToPath('/product/'+item.productId, 'new')" class="new-pd-two-pic relative">
          <a href="#"><img v-bind:src="URL.PIC+item.mainImgPath" alt=""></a>
          <div class="new-product-show-tag-wrap">
            <span>产品名称</span>
            <div class="new-product-show-tag-info">
                {{item.title}}
            </div>
          </div>
        </div>
       </div>
`,
    methods:{
      enterItem(){
        this.hoverFlg = true;
      },
      leaveItem(){
        this.hoverFlg = false;
      },
    }
  });


  export default {
     props:['sellWell','getFactoryId'],
     data(){
       return{
         //getFactoryId:''
       }
     },
    methods:{
//      enterItem(){
//        this.hoverFlg = true;
//      },
//      leaveItem(){
//        this.hoverFlg = false;
//      },
    }
  }
</script>
